<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>评论管理</title>
</head>
<body>
<div layout:fragment="content">
    <!--Modal 详情-->
    <div class="modal fade in" id="js-detail-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <!--./Modal 详情-->
    <!--Modal 详情-->
    <div class="modal fade in" id="js-query-modal">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <!--./Modal 详情-->
    <!-- 位置提示 -->
    <section class="content-header">
        <h1>
            评论管理
            <small>评论管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">评论管理</li>
        </ol>
    </section>
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <header class="tool-bar">
                            <h3 class="pull-left">评论管理</h3>
                            <div class="pull-right tool-button">
                                <a th:href="@{/admin/content/comment/query-modal.html}"
                                   class="btn btn-info"
                                   data-toggle="modal"
                                   data-target="#js-query-modal">
                                    <i class="fa fa-search"></i> 查询
                                </a>
                            </div>
                        </header>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="js-table" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>OID</th>
                                <th>类型</th>
                                <th>评论内容</th>
                                <th>发布时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script>
        var allRequest = {};
        $(function () {
            // 所有网络请求
            allRequest = {
                available: function (id, isAvailable) { // isAvailable 1:0
                    var available = !!isAvailable;
                    if (!!id
                        && isAvailable !== undefined) {
                        layer.confirm('确定要' + (available ? '开启' : '关闭') + '它？', {
                            btn: ['确定', '取消'] //按钮
                        }, function () {
                            $.post('/admin/content/comment/available/' + id.toString(), {available: available}, function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 1});
                                    $('#js-' + id).attr('class', 'fa fa-circle ' + (available ? 'text-success' : 'text-danger'));
                                } else {
                                    layer.msg(data.message, {icon: 2});
                                }
                            }, 'json');
                        }, function () {
                            layer.msg('取消' + (available ? '开启' : '关闭'));
                        });
                    }
                }
            };

            // 系统参数配置表格
            table = {
                $obj: $('#js-table'),
                dataTableObject: null,
                getSelectedRow: function () {
                    return this.dataTableObject.rows('.selected').data();
                },
                init: function () {
                    // 初始化
                    this.dataTableObject = this.$obj.DataTable({
                        dom: '<"toolbar">frtip',
                        ordering: true,
                        searching: false,
                        select: true,
                        autoWidth: true,
                        processing: false,
                        serverSide: true,
                        deferRender: true,
                        language: DATA_TABLE_CONFIG.language,
                        preDrawCallback: DATA_TABLE_CONFIG.preDrawCallback,
                        order: [[3, "desc"]],
                        ajax: {
                            url: '/admin/content/comment/data',
                            type: 'POST',
                            contentType: 'application/json',
                            data: function (params) {
                                params.oid = $('#oid').val()||'';
                                params.type = $('#type').val()||'';
                                params.regexMessage = $('#regexMessage').val()||'';
                                params.email = $('#email').val()||'';
                                // 携带参数
                                return JSON.stringify(params);
                            }
                        },
                        columns: [
                            {data: 'oid', bSortable: true},
                            {data: 'type', bSortable: true},
                            {data: 'content.message', bSortable: true,
                                defaultContent: '<span class="text-danger">暂无</span>'},
                            {data: 'createdAt', bSortable: true},
                            {data: 'available', bSortable: true},
                            {}
                        ],
                        columnDefs: [
                            {
                                render: function (data, type, row) {
                                    return ['未知', '文章'][row.type];
                                },
                                targets: 1
                            },{
                                render: function (data, type, row) {
                                    return new Date(row.createdAt).toLocaleString();
                                },
                                targets: 3
                            }, {
                                render: function (data, type, row) { // 状态
                                    if (!!data) {
                                        return '<i id="js-' + row.id + '" class="fa fa-circle text-success"></i>';
                                    } else {
                                        return '<i id="js-' + row.id + '" class="fa fa-circle text-danger"></i>';
                                    }
                                },
                                targets: 4
                            }, { // 操作
                                render: function (data, type, row) {
                                    return '<div class="btn-group">' +
                                        '         <button type="button" class="btn btn-default btn-flat">操作</button>' +
                                        '         <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown">' +
                                        '               <span class="caret"></span>' +
                                        '               <span class="sr-only">Toggle Dropdown</span>' +
                                        '         </button>' +
                                        '         <ul class="dropdown-menu" role="menu">' +
                                        // '             <li><a target="_blank" href="/admin/content/comment/browser/' + row.id + '">预览内容</a></li>' +
                                        '             <li><a class="js-modal" href="/admin/content/comment/detail/' + row.id + '" data-target="#js-detail-modal" data-toggle="modal">查看详情</a></li>' +
                                        '             <li class="divider"></li>' +
                                        '             <li><a href="javascript:;;" onclick="allRequest.available(\'' + row.id + '\', 1)">启用</a></li>' +
                                        '             <li><a href="javascript:;;" onclick="allRequest.available(\'' + row.id + '\', 0)">禁用</a></li>' +
                                        '         </ul>' +
                                        '   </div>';
                                },
                                targets: 5
                            }]
                    });
                    // 绑定多选
                    this.$obj.children('tbody').on('click', 'tr', function () {
                        $(this).toggleClass('selected');
                    });

                    var that = this;
                    // ==========================自定义=============================
                    // + 删除选中事件
                    $('#js-trash').on('click', function () {
                        var selectedRow = that.getSelectedRow();
                        var ids = [];
                        if (!!selectedRow.length) {
                            $.each(selectedRow, function (i, obj) {
                                ids.push(obj.id);
                            });
                        }
                        allRequest.deletes(ids);
                    });
                    // + 查询事件
                    $("#js-query").on('click', function () {
                        $('#js-query-model').modal('hide')
                        layer.msg('正在进行条件查询, 请稍后..');
                        that.$obj.ajax.reload();
                    });
                },
                reloadPage: function () {
                    this.dataTableObject.ajax.reload(null, false);
                },
                reloadAll: function () {
                    this.dataTableObject.ajax.reload();
                }
            };
            table.init();


            $('#js-detail-modal').on("hidden.bs.modal", function () {
                $(this).removeData("bs.modal");
            });
        });
    </script>
</div>
</body>
</html>
